<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="html,css,html5,javascript">
    <meta name="author" content="yejf">
    <!-- 导入bootstrap 全局样式 -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery.collapse.css">
    <title>动态添加考试章节案例</title>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <!-- 新增按钮 -->
            <div style="margin-bottom: 15px;">
                <button type="button" class="btn btn-primary" id="add_section_btn">新增章节</button>
            </div>
            <!-- 折叠面板组 -->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- 在点击增加章节时，来clone此元素，并追加到 父元素中 -->
                <div class="panel panel-default">
                    <!-- 一组章节 -->
                    <div class="panel-heading blue-bg" role="tab">
                        <h4 class="panel-title">
                            <!-- 在右上角添加关闭小图标 -->
                            <button type="button" class="close" data-dismiss="close">
                                <span>&times;</span>
                            </button>
                            <!-- 添加向下的小图标 caret -->
                            <a role="button" class="pull-right right_caret" data-toggle="collapse" href="#collapseOne">
                                <span class="caret"></span>
                            </a>
                            <!-- 增加试题按钮 -->
                            <button type="button" class="btn btn-default btn-xs pull-right right_caret" data-toggle="modal">
                                <span class="glyphicon glyphicon-plus">增加试题</span>
                            </button>

                            <!-- 输入项: 章节名称 -->
                            <div class="input_field">
                                <label>章节名称：</label>
                                <input type="text" name="sectionName" class="input"/>
                            </div>

                        </h4>
                    </div>
                    <!-- 要重写包一层 panel-heading -->
                    <div class="panel-heading gray-bg">
                        <h4 class="panel-title">
                            <!-- 输入项：章节描述 -->
                            <div class="input_field">
                                <label class="text-muted">章节描述：</label>
                                <input type="text" name="sectionDescription" class="input"/>
                                <!-- 批量设置分值: 这里修改padding，是为了改写 btn-xs的默认样式 -->
                                <a href="javascript:void(0);" class="btn btn-info btn-xs pull-right" data-trigger="setScore">批量设置</a>
                                <input type="text" name="scoreForEach" class="input_score pull-right" placeholder="分值"/>
                            </div>
                        </h4>
                    </div>
                    <!-- 内容区 -->
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body">

                        </div>
                    </div> <!-- end of 内容区 -->
                </div><!-- end of panel -->


            </div> <!-- end of panel-group -->

        </div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择题库</h4>
            </div>
            <div class="modal-body">
                利用相关组件来呈现题库
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="myModalBatchAddBtn">批量插入</button>
            </div>
        </div>
    </div>
</div>

<script src="../node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../js/jquery.collapse.js" type="text/javascript"></script>

<!-- 添加事件 -->
<script>
    $(function () {
        $("#add_section_btn").collapsePanel({
            "review": function (id) {
                alert("你要预览的数据id是："+id);
            },
            /*
            "delete": function (target) {
                //此属性在插件中已经实现，如果你想要换成其它的实现，则可以在此重写
            }*/

            "batchInsertId": "#myModalBatchAddBtn",
            "method": "post",
            "itemDatas": "json/data.json",
            "formatter": function (id) {
                return [
                    "<button type='button' class='btn btn-default' data-trigger='review' data-id='"+id+"'><i class='glyphicon glyphicon-eye-open'></i></button>",
                    "<button type='button' class='btn btn-default' data-trigger='delete'><i class='glyphicon glyphicon-remove'></i></button>"
                ].join("");
            }
            /*"itemDatas": [
                {"score": 1.0,"id":10, "item": "JAVA面向对象三大特性是什么？"},
                {"score": 1.0, "id": 11, "item": "Servlet的生命周期方法有哪些？"},
                {"score": 1.0, "id": 12, "item": "SpringMVC的前置控制器叫什么？"}
            ]*/
        });
    });
</script>

</body>
</html>